<template>
  <div class="info">
    <div>
      <h1>图书详情</h1>
      <form>
        <input type="hidden" name="id" :value="id" />
        <p>
          书名:<input
            type="text"
            v-model.trim="bookname"
            :disabled="type === 0"
          />
        </p>
        <p>
          作者:<input
            type="text"
            v-model.trim="author"
            :disabled="type === 0"
          />
        </p>
        <p>
          出版社:<input
            type="text"
            v-model.trim="publisher"
            :disabled="type === 0"
          />
        </p>
        <p class="btn">
          <button :disabled="type === 0" @click="confirm">确认</button
          ><button @click="cancel">取消</button>
        </p>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      bookname: "",
      author: "",
      publiser: "",
    };
  },
  props: {
    bookInfo: {
      type: Object,
    },
    type: {
      type: Number,
    },
  },
  created() {
    this.bookname = this.bookInfo.bookname;
    this.author = this.bookInfo.author;
    this.publisher = this.bookInfo.publisher;
    this.id = this.bookInfo.id;
    console.log(this.type);
  },
  computed: {},
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    confirm() {
      if (this.bookname === "" || this.author === "" || this.publisher === "") {
        return alert("请填写完整信息");
      }
      this.$emit("confirm", {
        id: this.id,
        bookname: this.bookname,
        author: this.author,
        publisher: this.publisher,
      });
    },
  },
};
</script>
<style lang='less'  scoped>
.info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  div {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 200px;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 2px 2px 5px black;
    justify-content: center;
    align-items: center;
    .btn {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      button {
        width: 80px;
        height: 25px;
      }
    }
  }
}
</style>
